<template>
	<view class="content">
		<view class="drop" v-show="clickShow">
			<view class="shape"></view>
			<view class="dropItem">
				<image src="../../static/tabimg/mima.png" class="imgCode"></image>
				<view @tap="changepass">修改密码</view>
			</view>
			<view class="dropItem">
				<image src="../../static/tabimg/tuichu.png" class="imgCode2"></image>
				<view @tap="close">退出应用</view>
			</view>
		</view>
		<!-- 导航栏 -->
		<view class="fixedit">
			<scroll-view class="uni-swiper-tab" @scroll="scroll" :scroll-left="scrollLeft">
				<view v-for="(item,index) in tabBars" :key="index" class="swiper-tab-list prodtab" :class="tabIndex==index ? 'active' : ''"
				 @tap="tapTab" :data-current="index" :data-cateid="item.cateid">{{item.name}}</view>
			</scroll-view>
		</view>
		<!-- 列表内容 -->
		<view class="listbox">
			<!-- 时间搜索框 -->
			<view class="search" v-if="changeTimebtn">
				<view class="timebox">
					<view class="date_item">
						<dyDatePicker placeholder="起始日期" :childValue="from" :minSelect="from_minSelect" :maxSelect="from_maxSelect"
						 :iconshow="false" @getData="getFromData"></dyDatePicker>
					</view>
					<view class="filter_inputline"></view>
					<view class="date_item">
						<dyDatePicker placeholder="结束日期" :minSelect="to_minSelect" :childValue="to" :maxSelect="to_maxSelect"
						 :iconshow="false" @getData="getToData"></dyDatePicker>
					</view>
				</view>
				<view class="searchbox" @tap="search">
					<image src="../../static/tabimg/search.png" class="searchimg"></image>
					<text class="searchtitle">按日期</text>
				</view>
			</view>
			<!-- 按钢卷号 -->
			<view class="search" v-if="changeSteelbtn">
				<input type="text" value="searchText" v-model="searchText" class="searchinput" placeholder="钢卷号查询" />
				<view class="searchbox" @tap="details(searchText)">
					<image src="../../static/tabimg/search.png" class="searchimg"></image>
					<text class="searchtitle">钢卷号</text>
				</view>
			</view>
			<!-- 暂无数据 -->
			<view v-if="isShow">
				<image :src="matidSrc" class="none"></image>
			</view>
			<block v-for="(item,index) in list" :key="index">
				<view class="listItem" @tap="statement(item.id)">
					<view class="leftItem">钢卷号:</view>
					<view class="middleItem">{{item.id}}</view>
					<view class="rightItem">更多详情</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {post} from '@/lib/Util.js'
	import dyDatePicker from '../../components/lanxiujuan-dyDate/lanxiujuan-dyDate.vue'       //时间选择器
	import {mapState,mapMutations} from 'vuex';
	var datalist = []
	var num = 1
	
	export default {
		components: {
			dyDatePicker
		},
		data() {
			return {
				flag:true,
				isShow:false,
				arr:[],
				list: [],
				id: '', //项目id
				changeTimebtn: false,
				changeSteelbtn: true,
				matidSrc:'../../static/tabimg/none.png',
				searchText: '', //搜索框
				clickShow: false,
				//时间参数
				from_minSelect: '1900/01/01',
				from_maxSelect: '2050/12/31',
				to_minSelect: '1900/01/01',
				to_maxSelect: '2050/12/31',
				from: '',
				to: '',
				//二级导航的data
				scrollLeft: 0,
				tabIndex: 0,
				isClickChange: false,
				tabBars: [{
					name: '最近一天',
					cateid: 'data1'
				}, {
					name: '最近一周',
					cateid: 'data2'
				}, {
					name: '最近一月',
					cateid: "data3"
				}, ],
				oneweek: [],
				oneday: [],
				onemonth: [],
				len: 0
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),

		methods: {
			//导航栏关闭应用事件
			...mapMutations(['logout']),
			close() {
				let _self = this;
				uni.showModal({
					title: '退出登录',
					content: '确定要退出吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_self.logout();
							// #ifdef APP-PLUS  
							plus.runtime.quit();
							// #endif 
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			changepass() {
				uni.navigateTo({
					url: '/pages/changepass/changepass'
				})
			},
			//二级菜单的事件
			tapTab(e) {
				var index = e.currentTarget.dataset.current;
				// 具体的分类id
				var cateid = e.currentTarget.dataset.cateid;
				this.tabIndex = index;
				this.getNewsList(cateid)
			},
			async getNewsList(val='data1'){
				datalist = [];
				this.list= [];
				
				let sql = {}
				if(this.flag){
					 sql = {
						data1:{
							"sql": "select * from V_PRODUCT_ts WHERE FLOOR(SYSDATE - CREATETIME ) = 0 ORDER BY CREATETIME DESC "
						},
						data2:{
							"sql": "select * from V_PRODUCT_TS WHERE FLOOR(SYSDATE - CREATETIME ) < 7 ORDER BY CREATETIME DESC"
						},
						data3:{
							"sql": "select * from V_PRODUCT_TS WHERE FLOOR(SYSDATE - CREATETIME ) < 30 ORDER BY CREATETIME DESC"
						}
					}	
				}else{
					sql = {
						data1:{
							"sql": "select * from V_PRODUCT_ts WHERE FLOOR(SYSDATE - CREATETIME ) = 0 and pro_id=" + this.id +
								" ORDER BY CREATETIME DESC "
						},
						data2:{
							"sql": "select * from V_PRODUCT_TS WHERE FLOOR(SYSDATE - CREATETIME ) < 7 and pro_id=" + this.id +
								" ORDER BY CREATETIME DESC"
						},
						data3:{
							"sql": "select * from V_PRODUCT_TS WHERE FLOOR(SYSDATE - CREATETIME ) < 30 and pro_id=" + this.id +
								" ORDER BY CREATETIME DESC"
						}
					}
				}
				let data = {
					"sql":"select * from V_PRODUCT WHERE CREATETIME - TO_DATE('2018-01-31 6:41:11', 'YYYY-MM-DD HH24:MI:SS') < 2 AND CREATETIME - TO_DATE('2018-01-31 6:41:11', 'YYYY-MM-DD HH24:MI:SS') > 0ORDER BY CREATETIME DESC"
				};
				let res = await post('database/executeQuery', sql[val]);
				console.log(res)
				let result = res.data
				if(result.length !== 0){
					this.isShow = false;
				}
				for(let i=0;i<result.length;i++){
					datalist.push({
						id:result[i].MATID
					})
				}
				this.getArrList()
				uni.stopPullDownRefresh();
			},
			getArrList(val){
				uni.showLoading({});
				let num = val?val:1;
				let count = num*100;
				let qqq = datalist.slice((num-1)*100,count)
				this.list =this.list.concat(qqq)
				if(this.list.length >= datalist.length){
					uni.showToast({"title":"已经加载全部", icon:"none"});
					return ;
				}
				setTimeout(function() {
					uni.hideLoading();
				}, 1000);
			},
			//跳转到详情页
			statement(val) {
				if (val) {
					console.log(val)
					uni.navigateTo({
						url: '../reportdetails/reportdetails?id=' + val,
						animationType: 'pop-in',
						animationDuration: 200
					});
				} else {
					uni.showToast({
						title: '操作有误,请确认数据是否正确',
						icon: 'none'
					})
				}
			},
			//下拉菜单的选择
			change() {
				console.log(111)
			},
			//搜索钢卷号
			async details(val) {
				let _self = this;
				this.isShow = false;
				this.changeTimebtn = !this.changeTimebtn;
				this.changeSteelbtn = !this.changeSteelbtn
				this.list = [];
				datalist = [];
				let str = val.replace(/\s*/g, "");
				let res = await post('database/executeQuery', {
					sql: "select * from TB_PRIMARYDATA WHERE MATID =  '" + str +"'"
				})
				console.log(res)
				if (res.data.length !== 0) {
					uni.showToast({
						icon: 'loading',
						title: "加载中",
						success() {
							for (let i = 0; i < res.data.length; i++) {
								datalist.push({
									id:res.data[i].MATID
								})
							}
							console.log(datalist)
							_self.getArrList()
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '暂无该钢卷号'
					})
					this.isShow = true;
				}
				this.searchText = ''
			},
			//时间选择器
			/**
			 * @param {to_minSelect|from}  to_minSelect结束时间的最小选择范围 from=>开始日期
			 */
			getFromData(time) {
				this.to_minSelect = time
				this.from = time
				console.log('起始时间', time)
			},
			/**
			 * @param {from_maxSelect|to} from_maxSelect=>开始日期可选最大可选值 to=> 结束日期
			 */
			getToData(time) {
				this.from_maxSelect = time
				this.to = time
			},
			//按时间查询
			async search() {
				this.isShow = false;
				this.changeTimebtn = !this.changeTimebtn;
				this.changeSteelbtn = !this.changeSteelbtn
				this.list = [];
				datalist = [];
				let _self = this;
				let data ={}
				if(this.flag){
					data = {
						"sql": "select * from V_PRODUCT_ts" + " WHERE TO_CHAR(CREATETIME,'YYYY-MM-DD HH24:MI') >= '" + this.from +
							"' AND TO_CHAR(CREATETIME,'YYYY-MM-DD HH24:MI') < '" + this.to + "'" + "ORDER BY CREATETIME DESC"
					};
				}else{
					data = {
						"sql": "select * from V_PRODUCT_ts" + " WHERE TO_CHAR(CREATETIME,'YYYY-MM-DD HH24:MI') >= '" + this.from +
							"' AND TO_CHAR(CREATETIME,'YYYY-MM-DD HH24:MI') < '" + this.to + "'" +
							"and pro_id=" + _self.id + "ORDER BY CREATETIME DESC"
					};
				}
				console.log(data)
				let res = await post('database/executeQuery', data);
				if (res.errMsg) {
					uni.showToast({
						icon: 'none',
						title: '请求超时'
					})
				} else if (res.data.length !== 0) {
					uni.showToast({
						icon: 'loading',
						title: "加载中",
						success() {
							for (let i = 0; i < res.data.length; i++) {
								datalist.push({
									id:res.data[i].MATID
								})
							}
							_self.getArrList()
						}
					})
				} else {
					this.isShow = true;
					uni.showToast({
						title: "暂无数据",
						icon: "none"
					})
				}
				this.from = ''
				this.to = ''
			}
			
		},
		//触底加载
		onReachBottom : function(){
			num +=1
			this.getArrList(num)
		},
		//下拉刷新
		onPullDownRefresh : function(){
			// 重置分页及数据
			num = 1;
			this.list = [];
			this.getNewsList()
		},
		onNavigationBarButtonTap(e) {
			if (e.float == "right") {
				this.clickShow = !this.clickShow;
			}
		},
		onLoad() {
			let _self = this;
			this.getNewsList()
			this.id = uni.getStorageSync('proid')
			// if (!this.id) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请选择相对应的项目',
			// 		success() {
			// 			uni.switchTab({
			// 				url: '/pages/main/main'
			// 			})
			// 		}
			// 	})
			// }
			if (!uni.getStorageSync('hasLogin')) {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					}
				});
			}
		},

		watch: {
			hasLogin() {
				if (!this.$store.state.hasLogin) {
					uni.reLaunch({
						url: '../login/login',
					});
				}
			}
		},
	}
</script>


<style>
	.fixedit {
		width: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
	}

	.active {
		color: #2353CC;
		background: #fff;
		height: 100rpx;
		font-family: PingFangSC-Semibold, sans-serif;
	}

	.listbox{
		padding: 100rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;
	}
	
	.listItem{
		width: 100%;
		height: 70rpx;
		display: flex;
		line-height: 70rpx;
		/* background: #e6e6e6; */
		font-size: 24rpx;
		color: #000000;
	}
	
	.leftItem{
		width: 13%;
	}
	
	.middleItem{
		width: 72%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.rightItem{
		width: 15%;
	}

	
	/* 二级列表样式 */
	.prodtab {
		width: 248upx;
		height: 100upx;
	}
	/* 搜索框 */
	.search {
		width: 640upx;
		height: 70upx;
		display: flex;
		padding: 0 30upx;
		box-sizing: border-box;
		border-radius: 35upx;
		background: #FFFFFF;
		margin: 24upx auto 20upx;
		border: 1upx solid #000000;
	}
	
	.searchimg {
		width: 33upx;
		height: 33upx;
	}
	
	.searchinput {
		width: 100%;
		height: 100%;
		line-height: 70upx;
		font-size: 24upx;
		color: #505153;
		font-family: PingFangSC-Regular, sans-serif;
	}
	
	.searchbox {
		width: 150upx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;
	}
	
	.searchtitle {
		font-size: 24upx;
		color: #505153;
		letter-spacing: 25;
		line-height: 70upx;
		font-family: PingFangSC-Regular, sans-serif;
	}

	.clickbtn {
		line-height: 70upx;
		height: 70upx;
		font-size: 24upx;
		color: #505153;
		font-family: PingFangSC-Semibold, sans-serif;
	}

	.clickcolor {
		color: #134199;
	}

	.timebox {
		display: flex;
		width: 100%;
	}

	.date_item {
		/* width: 100rpx; */
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: gray;
		font-size: 24rpx;
	}

	.filter_inputline {
		float: left;
		margin: 0 4rpx;
		height: 70rpx;
	}

	.filter_inputline:after {
		content: '—';
		font-size: 24rpx;
		line-height: 70rpx;
		color: #000000;
	}

	.changebtn {
		height: 70rpx;
		font-size: 24rpx;
		position: fixed;
		right: 5rpx;
		top: 146rpx;
		z-index: 999999;
		/* background: #01CFFE; */
		background: #4c7fff;
		border-radius: 10rpx;
		line-height: 50rpx;
		text-align: center;
	}
</style>
